<template>
  <div id="component-supplier-payment">
    <div class="row mb-2">
      <label class="control-label col-3 text-end"> 供应商 </label>
      <div class="col-9">
        <my-select-supplier
          :supplierId.sync="supplierId0"
          :supplierType="supplierType"
          :paymentMethodId.sync="paymentMethodId0"
        ></my-select-supplier>
      </div>
    </div>
    <div class="row">
      <label class="control-label col-3 text-end"> 支付方式 </label>
      <div class="col-9">
        <my-select-payment
          :paymentId.sync="paymentMethodId0"
        ></my-select-payment>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import MySelectSupplier from "@/components/my-select2-supplier.vue";
import MySelectPayment from "@/components/my-select-payment.vue";

export default {
  components: {
    MySelectSupplier,
    MySelectPayment,
  },
  props: {
    supplierId: {
      type: Number,
      default: 0,
    },
    paymentMethodId: {
      type: Number,
      default: 0,
    },
    supplierType: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {
      supplierId0: this.supplierId,
      paymentMethodId0: this.paymentMethodId,
    };
  },
  watch: {
    supplierId: function (newVal, oldVal) {
      console.log(newVal + ", " + oldVal);
      this.supplierId0 = this.supplierId;
    },
    paymentMethodId: function (newVal, oldVal) {
      // console.log(newVal + ', ' + oldVal)
      this.paymentMethodId0 = this.paymentMethodId;
    },
    supplierId0: function (newVal, oldVal) {
      // console.log(newVal + ', ' + oldVal)
      this.$emit("update:supplierId", newVal);
    },
    paymentMethodId0: function (newVal) {
      this.$emit("update:paymentMethodId", newVal);
    },
  },
  mounted: function () {
    // console.log(this.supplierId + ', ' + this.paymentMethodId)
    this.supplierId0 = this.supplierId;
    this.paymentMethodId0 = this.paymentMethodId;
  },
};
</script>
